<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>英语在线学习</title>
    <!-- 设置界面最上端LOGO图标 -->
    <link rel="icon" type="image/png" href="images/10.jpg" />

    <!-- 调用其他界面的CSS -->
    <link href="https://static.baydn.com/static/css/shanbay_base.22a0356e24599d4254111bb818e91de3.css" rel="stylesheet"
        type="text/css" />

    <link href="https://static.baydn.com/static/css/cover.aa4f4a898fc6dda9666d35b541532905.css" rel="stylesheet"
        type="text/css" />
    <link href="https://static.baydn.com/static/css/cover_index.af97e423d08a890a2a1aa6ea367503d7.css" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        /* 设置登录和注册以及单词、听力、口语、阅读的CSS */
        @-moz-document url-prefix() {
            body .main-body .social-login-box .span3 .social-login-icon {
                padding: 7px;
            }
        }

        /* 设置body界面背景色 */
        body {
            background-color: pink;
        }

        /* 设置一个类选择器c */
        .c {
            text-align: center;
        }

        s {
            width: 550px;
            height: 300px;
            background-color: pink;
            display: inline-block;
            background-image: url(images/22.jpg);
            background-repeat: no-repeat;
            background-position: right top;
        }

        u {
            width: 550px;
            height: 300px;
            background-color: pink;
            display: inline-block;
            background-image: url(images/33.png);
            background-repeat: no-repeat;
            background-position: right top;
        }

        del {
            width: 550px;
            height: 300px;
            background-color: pink;
            display: inline-block;
            background-image: url(images/44.png);
            background-repeat: no-repeat;
            background-position: right top;
        }

        b {
            width: 550px;
            height: 300px;
            background-color: pink;
            display: inline-block;
            background-image: url(images/55.png);
            background-repeat: no-repeat;
            background-position: right top;
        }

        .box {
            width: 1103px;
            /* height: 245px; */
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            height: 140px;
            width: 260px;
            list-style: none;
            float: left;
            background-color: pink;
            margin-left: 81px;
            margin-top: 20px;
        }

        h4 {
            margin: 5px 95px;
        }

        .dd p {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="c"><a href="https://wenku.baidu.com/view/0068a316866fb84ae45c8d1b.html?re=view" target="_blank"><img
                src="images/1.jpg"></a></div>
    <div class="container home-unlogin-header text-right">
        <div class="top-header">
            <!-- 登录注册设计，定义两个a标签用来超链接登录和注册 -->
            <a href="登录表格.html">登录</a>
            <span>|</span>
            <a href="注册界面.html">注册</a>
        </div>
        <!-- 定义4个a标签用来链接单词、听力、口语、阅读，并将它们呈现在页面上 -->
        <div class="text-center">
        </div>
        <div class="home-links text-center">
            <a href="https://www.hujiang.com/ciku/zuixincy/" target="_blank" class="active">单词</a>
            <a href="https://www.51talk.com/landing/bdshpc-131994.html?bd_vid=10243192717726449881"
                target="_blank">听力</a>
            <a href="spoken.html" target="_blank">口语</a>
            <a href="https://en-brief.xiao84.com/" target="_blank">阅读</a>
        </div>
    </div>
    <!-- 定义一个div，在div中再定义u、s两个行类元素 -->
    <div class="c">
        <s></s>
        <u></u>
    </div>
    <!-- 再定义一个div，在div中再定义del、b两个行类元素 -->
    <div class="c">
        <del></del>
        <b></b>
    </div>
    <div class="box">
        <li>
            <div class="dd">

                <a href="https://www.shanbay.com/vocabtest/welcome/" target="_blank">
                    <h4>测单词量</h4>
                </a>
                <p>不知道自己的词汇量</p>
                <p>还怎么学英语</p>
                <p>赶快来试一试</p>
            </div>
        </li>
        <li>
            <div class="dd">

                <a href="https://web.shanbay.com/codetime/home/intro?utm_source=web_codetime&utm_medium=cover_middle_column&version=A"
                    target="_blank">
                    <h4>学习编程</h4>
                </a>
                <p>边学边练的互动讲解和有趣的上机实践</p>
                <p>巩固知识的随堂测验</p>
                <p>整理好的知识卡片</p>
            </div>
        </li>
        <li>
            <div class="dd">
                <a href="登录表格.html" target="_blank">
                    <h4>学习社区</h4>
                </a>
                <p>学习路上，你不孤单</p>
                <p>小组长"骚扰"你，关怀你</p>
                <p>就是要让你一起坚持</p>
            </div>
        </li>
    </div>





</body>

</html>